<template>
  <div id='machine_list'>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item"><span class="search-label">输入搜索：</span><Input placeholder="机台名称/PN码" v-model='searchName'></Input></Col>
          <Col class="search-item">
            <span class="search-label">是否显示：</span>
            <Select v-model="pageObj.isShow" @on-change="search" style="width:180px">
              <Option v-for="item in isShowList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
      <template slot-scope="{ row }" slot="isShow">
        <!-- <span>{{row.displayFlag === 0 ? '显示': row.displayFlag === 1 ? '隐藏': ''}}</span> -->
        <i-switch size="large" :value='row.displayFlag' @on-change='onChange(row)' :disabled="!hasPermission('moms:scs:machineupdate')">
          <span slot="open">显示</span>
          <span slot="close">隐藏</span>
        </i-switch>
      </template>
    </Table>
    <Row type='flex' justify="end" style='padding: 20px'>
      <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts= '[10, 20, 50, 100]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { getMachineList, machineEdit } from '@/api/purchase/index'
export default {
  name: 'machine_list',
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  data () {
    return {
      loading: false,
      searchName: '',
      pageObj: {
        searchName: '',
        isShow: '-1',
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      isShowList: [
        { value: '-1', label: '全部' },
        { value: '0', label: '显示' },
        { value: '1', label: '隐藏' }
      ],
      tableData: [],
      columns: [
        {
          title: 'PN码',
          key: 'pnCode'
        },
        {
          title: '机台名称',
          key: 'name'
        },
        {
          title: '是否显示',
          slot: 'isShow'
        }
      ]
    }
  },
  methods: {
    reset () {
      this.searchName = ''
      this.pageObj.searchName = ''
      this.pageObj.isShow = '-1'
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getData()
    },
    doSearch () {
      this.pageObj.searchName = this.searchName
      this.pageObj.pageIndex = 1
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    onChange (row) {
      machineEdit({
        merchantId: this.$store.state.user.merchantId,
        machineId: row.machineId,
        displayFlag: row.displayFlag ? 1 : 0,
        productRemark: ''
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('更新成功！')
        } else {
          this.$Message.error(res.data.error || res.data.message)
        }
      })
    },
    getData () {
      this.loading = true
      getMachineList({
        merchantId: this.$store.state.user.merchantId,
        keyword: this.pageObj.searchName,
        displayFlag: this.pageObj.isShow === '-1' ? '' : this.pageObj.isShow,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount
          if (this.tableData.length > 0) {
            this.tableData.forEach(item => {
              if (item.displayFlag === 1) {
                item.displayFlag = false // 1隐藏 0与null显示
              } else {
                item.displayFlag = true
              }
            })
          }
        } else {
          this.$Message.error(result.error || result.message)
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
